import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('../components/provideAndInject/HomeView.vue')
  },
  {
    path: '/Hello',
    component: () => import('../components/lifeCycle/Hello.vue')
  },
  {
    path: '/CombinedAPI',
    component: () => import('../views/CombinedAPI.vue')
  },
  {
    path: '/Computed',
    component: () => import('../views/Computed.vue')
  },
  {
    path: '/class-and-style',
    component: () => import('../views/ClassAndStyle.vue')
  },
  {
    path: '/list-render',
    component: () => import('../views/listRender.vue')
  },
  {
    path: '/lifeCycle',
    component: () => import('../views/lifeCycle.vue')
  },
  {
    path: '/watch',
    component: () => import('../views/watch.vue')
  },
  {
    path: '/template-refs',
    component: () => import('../views/templateRefs.vue')
  },
  {
    path: '/componentBasic',
    component: () => import('../views/componentBasic.vue')
  },
  {
    path: '/componentVmodel',
    component: () => import('../views/componentVmodel.vue')
  },
  {
    path: '/ComponentSlot',
    component: () => import('../views/ComponentSlot.vue')
  },
  {
    path: '/dependency-inversion',
    component: () => import('../views/dependencyInversion.vue')
  },
  {
    path: '/custom-directives',
    component: () => import('../views/CustomDirectives.vue')
  },
  {
    path: '/plugins',
    component: () => import('../views/PluginsComp.vue')
  },
  {
    path: '/transition',
    component: () => import('../views/Transition.vue')
  },
  {
    path: '/transition-group',
    component: () => import('../views/TransitionGroup.vue')
  },
  {
    path: '/keep-alive',
    component: () => import('../views/KeepAlive.vue')
  },
  {
    path: '/animation',
    component: () => import('../views/Animation.vue')
  },
  {
    path: '/accordion',
    component: () => import('../views/Accordion.vue')
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
